//
// Reset Dropdown
// User Center / Home Page
//
.dropdown {
  .dropdown-menu {
    border-color: $dropdown-custom-border-color;
    box-shadow: $dropdown-box-shadow;
    .dropdown-item {
      transition: none;
      @include hover-focus {
        color: $white;
        background: $primary;
      }
    }
  }
}

// 导航条搜索框Dropdown
.dropdown-search-input {
  position: absolute;
  bottom: .5*$spacer;
  .dropdown-menu {
    width: 320px;
    margin-top: .75*$spacer;
    border: 1px solid $gray-300;
  }
}

// 当视口缩小时调整导航部分Dropdown的显示位置
// 导航部分Dropdown的定制
.dropdown-navbar {
  // md以下position调整为static
  @include media-breakpoint-down(sm) {
    position: static;
  }
  .dropdown-menu {
    margin-top: .5*$spacer;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid $gray-300;
    border-top: 1px solid $primary; // Header
    .dropdown-menu-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .5*$spacer $spacer;
    } // Content
    .dropdown-menu-content {
      position: relative;
      width: 100%;
      height: 240px; // 没有信息的情况
      &.is-empty {
        padding: $spacer 0;
      }
    } // Footer
    .dropdown-menu-footer {
      text-align: center;
      font-size: $font-size-sm;
      .link {
        display: block;
        padding: .5*$spacer $spacer;
        &:hover {
          color: $primary;
        }
      }
    } // 发现频道 Dropdown
    &.dropdown-channel {
      width: 540px;
      position: absolute;
      .dropdown-menu-content {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        height: auto;
        max-height: 100%;
        padding: $spacer;
        padding-bottom: 0;
        .dropdown-item {
          width: auto;
          margin-bottom: $spacer;
          padding: 0.5*$spacer 1.5*$spacer;
          &:hover {
            color: $primary;
            background: transparent;
          }
        }
      }
    } // 通知 Dropdown
    &.dropdown-notification {
      width: 320px;
    } // 用户菜单
    &.dropdown-user {
      min-width: 192px;
      .dropdown-item {
        display: flex;
        align-items: center;
        padding: .5*$spacer 1.5*$spacer;
        i {
          font-size: $font-size-lg;
          color: $icon-color;
        }
        @include hover-focus {
          i,
          span {
            color: white !important;
          }
        }
      }
    } // sm尺寸以上窗口的显示
    &.dropdown-notification,
    &.dropdown-user {
      position: absolute;
      right: 0;
      left: auto;
    } // sm尺寸以下窗口的显示
    @include media-breakpoint-down(sm) {
      &.dropdown-notification,
      &.dropdown-user {
        margin-top: 0;
        right: $spacer;
      }
    }
  }
}